<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="box">
                    <view class="flex tipbox">
                        <u-tabs
                            :list="list1"
                            :current="listindex1"
                            @click="clicklist1"
                            :activeStyle="{ color: '#3377FF', background: '#FFFFFF', padding: '5px 10px' }"
                            :inactiveStyle="{ color: '#606266', padding: '5px 10px' }"
                        ></u-tabs>
                        <!-- <u-subsection :list="list1" :current="listindex1" @change="clicklist1"></u-subsection> -->
                        <!-- <view :class="tipIndex == item.id ? 'tipActive' : 'tip'" @click="isRouter(item.path)" v-for="item in tiptext">{{ item.name }}</view> -->
                    </view>
                    <view class="flex">
                        <u-tabs
                            :list="thislist2"
                            :current="listindex2"
                            @click="clicklist2"
                            :activeStyle="{ color: '#3377FF', fontWeight: 'bold' }"
                            :inactiveStyle="{ color: '#606266' }"
                        ></u-tabs>
                        <!-- <view :class="tabIndex == item.id ? 'tabActive' : 'tab'" @click="navtab(item.id)" v-for="item in tab">{{ item.name }}</view> -->
                    </view>
                </view>
            </view>
            <view class="box" style="padding-bottom: 32rpx">
                <!-- 列表 -->
                <view>
                    <view class="list" v-for="item in 5">
                        <!-- 拖车 -->
                        <order-item-trailer v-if="listindex1 == 0" :item="item" :type="thislist2[listindex2].type"></order-item-trailer>
                        <!-- 服务 -->
                        <order-item-service v-if="listindex1 == 1" :item="item" :type="thislist2[listindex2].type"></order-item-service>
                        <!--  电池 -->
                        <order-item-battery v-if="listindex1 == 2" :item="item" :type="thislist2[listindex2].type"></order-item-battery>
                        <!--  开锁 -->
                        <order-item-lock v-if="listindex1 == 3" :item="item" :type="thislist2[listindex2].type"></order-item-lock>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template> 

<script>
import OrderItemBattery from './components/order-item-battery/order-item-battery'; //电池
import OrderItemLock from './components/order-item-lock/order-item-lock'; //开锁
import OrderItemService from './components/order-item-service/order-item-service'; //服务
import OrderItemTrailer from './components/order-item-trailer/order-item-trailer'; //拖车

export default {
    components: {
        OrderItemBattery,
        OrderItemLock,
        OrderItemService,
        OrderItemTrailer
    },
    data() {
        return {
            sendShow: false,
            type: 0, //0待发货，1待收货，2已完成，3售后中
            ProductType: 1, //0普通商品，1电池
            tipIndex: 3,
            tabIndex: 1,
            value1: 0,

            tab: [
                {
                    name: '全部',
                    id: 1
                },
                {
                    name: '待支付',
                    id: 2
                },
                {
                    name: '待发货',
                    id: 3
                },
                {
                    name: '待收货',
                    id: 4
                },
                {
                    name: '已完成',
                    id: 5
                },
                {
                    name: '售后',
                    id: 6
                }
            ],
            list: [],

            listindex1: 0,
            list1: [
                { name: '拖车', type: 'trail' },
                { name: '服务', type: 'server' },
                { name: '电池', type: 'battery' },
                { name: '开锁', type: 'lock' }
            ],

            listindex2: 0,
            list2: [
                [
                    { name: '新订单', type: 'new' },
                    { name: '进行中', type: 'progress' },
                    { name: '已完成', type: 'completed' }
                ],
                [
                    { name: '新订单', type: 'new' },
                    { name: '进行中', type: 'progress' },
                    { name: '已完成', type: 'completed' }
                ],
                [
                    { name: '新订单', type: 'new' },
                    { name: '待取货', type: 'pickup' },
                    { name: '配送中', type: 'service' },
                    { name: '服务中', type: 'progress' },
                    { name: '已完成', type: 'completed' }
                ],
                [
                    { name: '新订单', type: 'new' },
                    { name: '进行中', type: 'progress' },
                    { name: '已完成', type: 'completed' }
                ]
            ],
            thislist2: [
                { name: '新订单', type: 'new' },
                { name: '进行中', type: 'progress' },
                { name: '已完成', type: 'completed' }
            ]
        };
    },
    onLoad(e) {
        console.log(e.tipIndex);
        this.tipIndex = e.tipIndex;
        // this.thislist2 = this.list2[this.listindex1];
    },
    methods: {
        clicklist1(item) {
            console.log('item', item);
            this.listindex1 = item.index;
            this.thislist2 = this.list2[this.listindex1];
            this.listindex2 = 0;
            // 刷新数据
        },
        clicklist2(item) {
            console.log('item', item);
            this.listindex2 = item.index;
            // 刷新数据
        },
        buy() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/MallToBePaid'
            });
        },
        CancelOrder() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/CancelOrder'
            });
        },
        orderInfo() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/BatteryToBePaid'
            });
        },
        isRouter(url) {
            this.$api.auth(url);
        },
        click1(e) {
            console.log('click1', e);
            if (e == 0) {
                uni.navigateTo({
                    url: '/pages/business/order'
                });
            }
            if (e == 2) {
                uni.navigateTo({
                    url: '/pages/business/business'
                });
            }
        },
        tip(e) {
            this.tipIndex = e;
        },
        navtab(e) {
            this.tabIndex = e;
        },
        sendClose() {
            this.sendShow = false;
        },
        // 待发货详情
        details(type) {
            console.log(1);
            if (this.ProductType == 0) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/MallToBePaid?type=' + type
                });
            }
            if (this.ProductType == 1) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/BatteryCompleted'
                });
            }
        },
        // 售后详情
        details1() {
            uni.navigateTo({
                url: '/pages/business/AfterSales'
            });
        },
        // 查看评价
        evaluea() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/orderEvaluation'
            });
        },
        // 查看物流
        loginst() {
            console.log(1);
            uni.navigateTo({
                url: '/pages/business/LogisticsInformation'
            });
        },
        add() {
            uni.navigateTo({
                url: '/pages/business/addProduct'
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        },
        // pageNo 页数 pageSize 单页显示数量
        queryList(pageNo, pageSize) {
            //模拟数据
            let list = [
                {
                    allMoney: '2199',
                    name: '王先生',
                    phone: '159****7855',
                    address: '贵州省贵阳市南明区花果园购物中心1号',
                    time: '2022-02-12 2022-02-12',
                    number: '2',
                    type: '待发货',
                    oddNumbers: '202204130925640001',
                    commodity: [
                        {
                            img: '@/static/imgs/img.png',
                            title: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                            type: '新款',
                            num: 1,
                            inventory: '3323',
                            money: '1549.00'
                        }
                    ]
                }
            ];
            this.$refs.paging.complete(list);
            // 分页停止
            if (pageNo >= 5) {
                this.$refs.paging.complete(false);
            }
        },
        // 重新加载分页
        reload() {
            this.$refs.paging.reload();
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-tabs__wrapper__nav__line {
    display: none;
}
.nameTitle {
    text-align: center;
}
.storeImg {
    width: 48rpx;
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-right: 8rpx;
}
.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
.userInfo {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    margin-top: 26rpx;
    .info {
        padding: 8rpx 0;
    }
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box {
    padding: 0 32rpx 32rpx;
    // .list {
    //     background: white;
    //     border-radius: 24rpx;
    //     margin-top: 24rpx;
    //     padding: 24rpx;
    //     display: block;
    //     overflow: hidden;
    // }
    // .shopImg {
    //     width: 200rpx;
    //     height: 200rpx;
    //     border-radius: 16rpx;
    //     margin-right: 24rpx;
    // }
    // .tipbox {
    //     background: #f7f7f7;
    //     border-radius: 8rpx;
    //     color: #666b75;
    //     font-size: 28rpx;
    //     padding: 8rpx;
    // }
    // .tip {
    //     padding: 16rpx;
    //     border-radius: 8rpx;
    // }
    // .tipActive {
    //     background: white;
    //     color: #00091a;
    //     padding: 16rpx;
    //     border-radius: 8rpx;
    // }
    // .tab {
    //     color: #999ca3;
    //     font-size: 28rpx;
    //     margin: 19rpx;
    // }
    // .tabActive {
    //     color: #3377ff;
    //     font-size: 32rpx;
    //     margin: 19rpx;
    //     font-weight: bold;
    // }
    // .btn {
    //     height: 68rpx;
    //     line-height: 68rpx;
    //     padding: 0 30rpx;
    //     text-align: center;
    //     border: 2rpx solid #ccced1;
    //     border-radius: 16rpx;
    //     margin: 0 12rpx;
    //     font-size: 28rpx;
    // }
}
</style>
